<template>

	<body>
		<div class="top">
			
		</div>
		<header>
			<div style="height: auto;" class="swiper-container">
				<div class="swiper-wrapper">

					<!-- 下面是4个不同颜色的轮播滑块 -->
					<div style="background-color: red;" class="swiper-slide sw-slide secope"><img src="././img/kc02.png" /></div>
				</div>
				<!-- <div class="swiper-button-prev" ></div> -->
				<!--左箭头-->
				<!-- <div class="swiper-button-next"></div> -->
				<!--右箭头-->
				<div class="swiper-pagination"></div>
				<!--分页器（就是4个点点）-->
			</div>
		</header>
		<nav class="container">
			<section>
				<h4>
					公开课
				</h4>
				<i>查看全部></i><strong></strong>
			</section>
			<div class="lunbo">
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
								</div>
							</div>
							<!-- <div class="swiper-pagination"></div> -->
						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>
						<div class="swiper-slide">
							<div class="main">
								<div class="main_hd">
									<img src="./img/500577327@2x(1).png" alt="">
								</div>
								<div class="wenzi1">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放.
										</div>
									</div>
								</div>
								<!-- <div class="swiper-pagination"></div> -->
							</div>


						</div>

					</div>
					<!-- 四个小点 -->
					<!-- <div class="swiper-pagination"></div> -->
				</div>
			</div>
		</nav>
		<section class="container">
			<h4>
				热门推荐
			</h4>
			<i>查看全部></i><strong></strong>
		</section>
		<div class="menu">
			<a href="../课程详情和课程参数/index.html"  v-for="(item,index) in bookData.list" :key="index">
				<figure>
					<img src="././img/kc05.png" style="width: 3.066666rem; height: 3.333333rem;">
					<div class="wenzi2">
						<p>{{ item.introduce1 }}</p>
						<p>{{ item.introduce2 }}</p>
						<p>共{{item.coursenum}}讲</p>
						<div class="wenzi2_bottom">
							<p>￥{{ item.price }}</p>
							<p>{{item.receive}}人已订阅</p>
						</div>
					</div>
				</figure>
			</a>	
		</div>
		<div class="footer container">
				<ul>
					<li>
						<a @click="toIndex()">
							<span>&#xe751;</span>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a @click="toCourse()">
							<span>&#xe614;</span>
							<span>课程</span>
						</a>
					</li>
					<li>
						<a @click="toHuati()">
							<span>
								&#xe630;
							</span>
							<span>话题</span>
						</a>
					</li>
					<li>
						<a @click="toMyUser()">
							<span>&#xe600;</span>
							<span>我的</span>
						</a>
					</li>
				</ul>
			</div>
	</body>
	
</template>
<script setup>
import './css/swiper-bundle.min.css'
import './css/normalize.css'
import './css/style.css'
import './swiper/swiper-bundle.min.css'
import './js/flexible.js'
import './css/lunbo.css'
import './swiper/swiper-bundle.min.js'
import './js/swiper-bundle.min.js'
import './iconfont/iconfont.css'




import request from "../../axios/request.js";
import { useRouter } from 'vue-router'
const router = useRouter()
const toIndex=()=>{
	router.push('/index')
}

const toCourse=()=>{
	router.push('/course')
}

const toHuati=()=>{
	router.push('/huati')
}

const toMyUser=()=>{
	router.push('/myuser')
} 


import { reactive, onMounted } from "vue";
  const bookData = reactive({
    list: [],
  });
  onMounted(() => {
    getData();
	console.log(bookData.list)
  });

 // 测试请求方法
 const getData = () => {
    request({
      // url: "/mock/getBooks",
      url: "http://127.0.0.1:8081/qualitys",
      method: "get",
    })
      .then((res) => {
        bookData.list = res.data;
		console.log(bookData.list)
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  };



</script>




